<!-- 主表表单组件 -->
<!-- 功能: 1.显示数据记录的详情 2.新增数据记录 -->
<template>
  <el-form
    id="ik-info-head"
    ref="form"
    :model="pageData.formData.head"
    class="ik-info-head"
    :status-icon="true"
    label-width="120px"
    :disabled="mode === 'details'"
  >
    <el-row v-for="row in pageData.formItems" :key="row.rowIndex">
      <el-col v-for="col in row.items" :key="col.id" class="mb-5" :span="col.span">
        <ik-form-select
          v-if="col.type==='select'"
          :ref="`input_${col.code}`"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
          key-field="key"
          value-field="value"
        />
        <ik-form-group-select
          v-else-if="col.type==='group'"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
          :url="col.config.url"
          :data-down="loading"
        />
        <ik-form-date
          v-else-if="col.type==='date'"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
          :url="col.config.url"
        />
        <ik-form-time
          v-else-if="col.type==='time'"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
          :url="col.config.url"
        />
        <ik-form-datetime
          v-else-if="col.type==='datetime'"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
          :url="col.config.url"
        />
        <ik-form-number
          v-else-if="col.type==='number'"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
        />
        <ik-form-id
          v-else-if="col.type==='id'"
          :ref="`input_${col.code}`"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
        />
        <ik-form-image-oss
          v-else-if="col.type==='oss'"
          :ref="`input_${col.code}`"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
        />
        <ik-form-video-oss
          v-else-if="col.type==='video'"
          :ref="`input_${col.code}`"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
        />
        <ik-form-popup-select
          v-else-if="col.type==='popup'"
          :ref="`input_${col.code}`"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
          v-on="col.handleEvent"
        />
        <yz-text-input
          v-else
          :ref="`input_${col.code}`"
          v-model="pageData.formData.head[col.code]"
          :code="col.code"
          :name="col.name"
          v-bind="col.config"
        />
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
import { getById } from '@/api/ik/data/dataApi'

export default {
  props: {
    mode: {
      type: String,
      required: true
    }
  },
  inject: ["pageData"],
  data() {
    return {
      // 表单数据
      formData: {},
      // 数据记录的id
      id: "",
      // 页面loading
      loading: false,
      // 验证器
      verify: {
        head: {},
        body: {}
      }
    }
  },
  methods: {
    // --- 给父组件使用的方法 ---
    /**
     * 更新表单
     * @param formData
     */
    updateFormData(formData) {
      this.formData = { ...this.formData, ...formData }
    },
    /**
     * 验证表单数据
     * @param callback
     */
    validateFormData(callback) {
      this.$refs.form.validate(valid => {
        if (valid) {
          callback(this.formData)
        }
      })
    },
    // --- 调用api ---
    /**
     * 获取数据
     * @param id
     */
    get(id) {
      this.loading = true
      getById(this.pageData.bgPath, id)
        .then(res => {
          this.pageData.formData = res.data
        })
        .finally(() => {
          this.loading = false
        })
    },
    // --- 事件 ---
    /**
     * 字段变更事件
     * @param fieldName
     * @param oldValue
     * @param newValue
     * @param errorSign
     */
    onFieldChange(fieldName, oldValue, newValue, errorSign) {
      this.$set(this.formData, fieldName, newValue)
      this.verify.head['head' + '-' + fieldName] = errorSign
      this.$emit('onFieldChange', fieldName, oldValue, newValue)
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/listinfo";

.data-directory-tabs-info {
  height: calc(100% - 60px);
}

.data-directory-tabs-info .el-tabs__content {
  height: calc(100% - 53px);
  overflow: auto;
  min-height: 350px;
}
</style>
